<template>
    <div class="page">
        <!-- search -->
        <div class=""
            style="display: flex;flex-direction: row;align-items: center;padding: 12px;background-color: #FFFFFF;">
            <div class="" @click="popBack()">
                <i class="iconfont icon-arrow-left" style="font-size: 16px;font-weight: bold;"></i>
                <span style="font-size: 16px;">学生管理</span>
            </div>
            <!-- search -->
            <div
                style="margin-left: 12px;flex: 1;display: flex;align-items: center;flex-direction: row;background-color: #F1F1F1;height: 30px;border-radius: 15px;">
                <div class="iconfont icon-sousuo"
                    style="font-size: 16px;font-weight: bold;color: #999999;margin-right: 10px;margin-left: 10px;">
                </div>
                <input type="text" v-model="keywd" value="" placeholder="请输入关键字搜索"
                    style="font-size: 12px;flex: 1;border: none;background-color: #f1f1f1;" />
                <div style="width: 1px;height: 14px;background-color: #999999;" />
                <div @click="searchHandle" style="font-size: 12px;color: #007AFF;padding:0 5px;width: 40px;text-align: center;">搜索</div>
            </div>
        </div>

        <!-- list -->
        <div style="flex:1;background-color: #f5f5f5;height:100vh;display: flex;justify-content: center;align-items: center;"
            v-if="list.length == 0">
            <div style="font-size: 14px;color: #999999;">暂无数据</div>
        </div>
        <div class="" style="flex: 1;overflow-y: auto;" v-else>
            <!-- cell -->
            <div @click="loadDetial(item)" v-for="(item,idx) in list" style="padding: 12px;background-color: #FFFFFF;display: flex;align-items: center;">
                <van-image round width="64px" height="64px" :src="item.headUrl" />
                <div style="flex: 1;padding-left: 12px;">
                    <!-- row1 -->
                    <div style="display: flex;align-items: center;flex-direction: row;">
                        <div class="" style="display: flex;align-items: center;flex: 1;">
                            <div style="font-size: 16px;">{{item.nickName}}</div>
                            <!-- <div style="font-size: 16px;">昵称</div> -->
                            <div style="font-size: 12px;color: #999999;margin-left: 12px;">{{item.school}}</div>
                        </div>
                    </div>
                    <!-- row2 -->
                    <div style="flex: 1;flex-direction: column;display: flex;overflow: hidden;">
                        <div style="font-size: 12px;color: #999999;margin-top: 5px;">姓名：{{item.stuName}}</div>
                    </div>
                    <!-- row2 -->
                    <div style="flex: 1;flex-direction: column;display: flex;overflow: hidden;">
                        <div style="font-size: 12px;color: #999999;margin-top: 5px;">来源：{{item.chnSource}}</div>
                    </div>
                    <!-- row3 -->
                    <div
                        style="flex: 1;flex-direction: row;display: flex;overflow: hidden;justify-content: space-between;">
                        <div style="font-size: 12px;color: #999999;margin-top: 5px;">销售负责人：{{item.saleHead}}</div>
                    </div>
                    <!-- row4 -->
                    <div v-if="false"
                        style="flex: 1;flex-direction: row;display: flex;overflow: hidden;justify-content: space-between;">
                        <div style="display: flex;align-items: center;">
                            <div style="font-size: 12px;color: #999999;margin-top: 5px;">购买课程数:</div>
                            <div
                                style="font-size: 14px;color: #FF0000;margin-top: 5px;font-weight: bold;margin-left: 5px;">
                                3</div>
                        </div>
                        <div
                            style="display: flex;align-items: center;background-color: #f4f5f7;justify-content: center;padding: 0 10px;border-radius: 20px;">
                            <div style="font-size: 12px;color: #999999;margin-right: 5px;display: block;"
                                class="iconfont icon-fujian"></div>
                            <div style="font-size: 12px;color: #999999;margin-right: 5px;display: block;">细雨无声</div>
                        </div>
                    </div>
                </div>
                <!-- line -->
                <div style="height: 1px;background-color: #ebebeb;margin-top: 10px;" />
            </div>
        </div>
    </div>
</template>

<script>
    import { stuBuspList } from "../../api/workbench.js";
    export default {
        data() {
            return {
                pageNum: 1,
                pageSize: 30,
                keywd: "",
                list: [],
            };
        },
        created() {
            this.netStuBuspList();
        },
        methods: {
            netStuBuspList() {
                let fi = {
                    pageNum: this.pageNum,
                    pageSize: this.pageSize,
                    keyword: this.keywd,
                };
                let self = this;
                stuBuspList(fi)
                    .then((res) => {
                        let { data } = res;
                        let { record } = data;
                        self.list = record;
                    })
                    .catch((e) => { });
            },
            searchHandle(){
                this.netStuBuspList();
            },

            popBack() {
                this.$router.back({});
            },
            loadDetial(data) {
                this.$router.push({
                    path: "/personinfo-hasbindbusiness-detailinfo",
                    query: {
                        id: data.id,
                    },
                });
            },
        },
    };
</script>

<style scoped>
    .page {
        background-color: #f4f5f7;
        flex-direction: column;
        flex: 1;
        overflow: hidden;
        display: flex;
    }
</style>